<template>
  <el-dialog :visible.sync="isShow" v-if="isShow" title="游戏设置" width="50%" :before-close="handleClose" top="50px" :close-on-click-modal="false">
    <div class="border-box">
      <el-form ref="ruleForm" :model="formParams" :rules="ruleForm" label-position="right" label-width="0">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            {{ item.label }}<span :class="item.pass?'mustPass':'noMustPass'">*</span>
          </div>
          <div class="content width80">
            <div class="item-clear" v-show="item.key=='game'" label="" prop="game">
              {{gameLabel(game_id)}}
            </div>
            <el-form-item class="item-clear" v-show="item.key=='remark'" label="" prop="a_game_remark">
              <el-input class="width360" type="text" v-model="formParams.a_game_remark" clearable placeholder="请输入备注" auto-complete="off"/>
            </el-form-item>
            <div class="item-clear" v-show="item.key=='game_logic'" label="" prop="game_logic" style="height:auto;">
              <div class="title flex">
                <span class="width20">开启状态</span>
                <el-form-item class="item-clear" label="" prop="a_game_switch">
                  <el-radio-group v-model="formParams.a_game_switch">
                    <el-radio-button :label="1">开启</el-radio-button>
                    <el-radio-button :label="0">关闭</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </div>
              <div class="title flex">
                <span class="width20">开始最小人数</span>
                <el-form-item class="item-clear"  label="" prop="a_game_minnum">
                  <el-input-number :min="0" :max="999999999" :precision="0" v-model="formParams.a_game_minnum" controls-position="right" clearable placeholder="请输入开始最小人数(秒)"/>
                </el-form-item>
                <span class="colorRed marginL10">秒数</span>
              </div>
              <div class="title flex">
                <span class="width20">匹配间隔时间</span>
                <el-form-item class="item-clear"  label="" prop="a_game_matchinterval">
                  <el-input-number :min="0" :max="999999999" :precision="0" v-model="formParams.a_game_matchinterval" controls-position="right" clearable placeholder="请输入匹配间隔时间(秒)"/>
                </el-form-item>
                <span class="colorRed marginL10">退出房间(秒数)</span>
              </div>
              <div class="title flex">
                <span class="width20">开始倒计时</span>
                <el-form-item class="item-clear"  label="" prop="a_game_begincountdown">
                  <el-input-number :min="0" :max="999999999" :precision="0" v-model="formParams.a_game_begincountdown" controls-position="right" clearable placeholder="请输入开始倒计时时间"/>
                </el-form-item>
              </div>
              <div class="title flex">
                <span class="width20">操作倒计时</span>
                <el-form-item class="item-clear"  label="" prop="a_game_operationcountdown">
                  <el-input-number :min="0" :max="999999999" :precision="0" v-model="formParams.a_game_operationcountdown" controls-position="right" clearable placeholder="请输入操作倒计时"/>
                </el-form-item>
                <span class="colorRed marginL10">玩家回合(秒)</span>
              </div>
              <div class="title flex">
                <span class="width20">无操作上限时间</span>
                <el-form-item class="item-clear"  label="" prop="a_game_nooperationlimit">
                  <el-input-number :min="0" :max="999999999" :precision="0" v-model="formParams.a_game_nooperationlimit" controls-position="right" clearable placeholder="请输入操作倒计时"/>
                </el-form-item>
              </div>
            </div>
            <!-- APP端 -->
            <div class="item-clear" v-show="item.key=='game_app'" label="" prop="game_app" style="height:auto;">
              <div class="title flexStartDetween" v-for="(second,two) in columnData" :key="two">
                <div class="btn-box-add">
                  <el-tooltip content="新增配置" v-show="columnIndex==two && columnData.length<2">
                    <el-button class="marginL10" size="mini" type="primary" circle icon="el-icon-plus" @click="addColumn"/>
                  </el-tooltip>
                </div>
                <div class="flex">
                  <span class="width25 marginR10">栏类型</span>
                  <el-form-item class="item-clear"  label="">
                    <el-select class="width180" v-model="second.type" placeholder="请选择游戏栏类型" :disabled="columnData.length>1" filterable>
                      <el-option label="普通游戏位" :value="1">普通游戏位</el-option>
                      <el-option label="推广游戏位" :value="2">推广游戏位</el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="flex marginR10">
                  <span class="width25 marginR10">顺序</span>
                  <el-form-item class="item-clear"  label="">
                    <el-input-number class="width180" :min="0" :max="999999999" :precision="0" v-model="second.sort" controls-position="right" clearable placeholder="请输入顺序"/>
                  </el-form-item>
                </div>
                <div class="btn-box-delete" >
                  <el-tooltip content="删除配置" v-show="columnData.length != 1">
                    <el-button size="mini" type="danger" circle icon="el-icon-minus" @click="deleteColumn(two)"/>
                  </el-tooltip>
                </div>
              </div>
              <div class="title flex">
                <span class="width15">游戏角标</span>
                <el-form-item class="item-clear"  label="" prop="a_game_appmark">
                  <el-select class="width240" v-model="formParams.a_game_appmark" placeholder="请选择游戏角标" filterable>
                    <el-option :label="second.label" :value="second.value" v-for="(second, two) in cornerData" :key="two"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <!-- WEB端 -->
            <div class="item-clear" v-show="item.key=='game_web'" label="" prop="game_web" style="height:auto;">
              <div class="title flex">
                <span class="width15">游戏名称</span>
                <el-form-item class="item-clear"  label="" prop="a_game_webname">
                  <el-select class="width360" v-model="formParams.a_game_webname" placeholder="请选择游戏名称" filterable>
                    <el-option :label="second.c_base_zh_cn||second.c_base_en_us" :value="second.a_base_message_id" v-for="(second, two) in languageArray" :key="two"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="title flex">
                <span class="width15">游戏图标</span>
                <el-form-item class="item-clear" style="height:auto;">
                  <imgUpLoad :url="formParams.a_game_webicon" @success='imgUploadChangIcon'/>
                </el-form-item>
              </div>
              <div class="title flex">
                <span class="width15">游戏背景</span>
                <el-form-item class="item-clear" style="height:auto;">
                  <imgUpLoad :url="formParams.a_game_webpic" @success='imgUploadChangPic'/>
                </el-form-item>
              </div>
              <div class="title flex">
                <span class="width15">游戏简介</span>
                <el-form-item class="item-clear"  label="" prop="a_game_webintro">
                  <el-select class="width360" v-model="formParams.a_game_webintro" placeholder="请选择游戏简介" filterable>
                    <el-option :label="second.c_base_zh_cn||second.c_base_en_us" :value="second.a_base_message_id" v-for="(second, two) in languageArray" :key="two"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="title flex">
                <span class="width15">页面跳转</span>
                <el-form-item class="item-clear"  label="" prop="a_game_webjump">
                  <el-input class="width360" type="text" v-model="formParams.a_game_webjump" clearable placeholder="请输入页面跳转" auto-complete="off"/>
                </el-form-item>
              </div>
              <div class="title flex">
                <span class="width15">游戏角标</span>
                <el-form-item class="item-clear"  label="" prop="a_game_webmark">
                  <el-select class="width240" v-model="formParams.a_game_webmark" placeholder="请选择游戏角标" filterable>
                    <el-option :label="second.label" :value="second.value" v-for="(second, two) in cornerData" :key="two"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addGame,
  editGame,
} from '@/api/game'
import {
  GAME_TYPE
} from '@/utils/enum'
import imgUpLoad from '@/components/imgUpLoadSingle'
export default {
  components: {
    imgUpLoad
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
    languageArray: {
      type: Array,
      default: function () {
        return []
      }
    },
    cornerData: {
      type: Array,
      default: function () {
        return []
      }
    },
    game_id: {
      type: Number,
      default: 1
    },
  },
  data () {
    return {
      GAME_TYPE,
      isShow: false,
      itemData:[
        { label: '游戏', key: 'game',},
        { label: '备注', key: 'remark',},
        { label: '通用逻辑', key: 'game_logic' },
        { label: 'APP端', key: 'game_app' },
        { label: 'WEB端', key: 'game_web' },
      ],
      formParams: {
        a_game_id: this.game_id, //游戏id
        a_game_switch: 1, //游戏开关 0-关闭 1-开启
        a_game_remark: '', //备注
        a_game_webname: '', //web名称 多语言id
        a_game_webicon: '', //web图标
        a_game_webpic: '', //web游戏北京图片
        a_game_webintro: '', //web游戏简介 多语言id
        a_game_webjump: '', //web页面跳转地址
        a_game_appposition: '', //栏类型，顺序
        a_game_normalcolumn: 1,
        a_game_normalsort: 0,
        a_game_extensioncolumn: 2,
        a_game_extensionsort: 0,
        a_game_appmark: '', //app游戏角标
        a_game_webmark: '', //web游戏角标
        a_game_matchinterval: 0, //匹配时间间隔
        a_game_begincountdown: 0, //开始倒计时
        a_game_minnum: 0, //开始最小人数
        a_game_operationcountdown: 0, //操作倒计时
        a_game_nooperationlimit: 0 //无操作上限时间
      },
      columnData:[
        {type:1,sort:0}
      ],
      columnIndex:0,
      ruleForm: {},
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
        that.columnData = that.formParams.appposition
        that.columnIndex = that.formParams.appposition.length-1
      } else {
        that.formParams = {
          a_game_id: that.game_id, //游戏id
          a_game_switch: 1, //游戏开关 0-关闭 1-开启
          a_game_remark: '', //备注
          a_game_webname: '', //web名称 多语言id
          a_game_webicon: '', //web图标
          a_game_webpic: '', //web游戏北京图片
          a_game_webintro: '', //web游戏简介 多语言id
          a_game_webjump: '', //web页面跳转地址
          a_game_appposition: '', //栏类型，顺序
          a_game_normalcolumn: 1,
          a_game_normalsort: 0,
          a_game_extensioncolumn: 2,
          a_game_extensionsort: 0,
          a_game_appmark: '', //app游戏角标
          a_game_webmark: '', //web游戏角标
          a_game_matchinterval: 0, //匹配时间间隔
          a_game_begincountdown: 0, //开始倒计时
          a_game_minnum: 0, //开始最小人数
          a_game_operationcountdown: 0, //操作倒计时
          a_game_nooperationlimit: 0 //无操作上限时间
        }
      }
    },
  },
  mounted () {},
  methods: {
    // 确认
    handleConfirm (formvalue) {
      let that = this, params = JSON.parse(JSON.stringify(that.formParams));
      // 通用设置
      if(!params.a_game_minnum && params.a_game_minnum!=0){
        return that.$message.error('请输入开始最小人数')
      }
      if(!params.a_game_matchinterval && params.a_game_matchinterval!=0){
        return that.$message.error('请输入匹配时间间隔')
      }
      if(!params.a_game_begincountdown && params.a_game_begincountdown!=0){
        return that.$message.error('请输入开始倒计时')
      }
      if(!params.a_game_operationcountdown && params.a_game_operationcountdown!=0){
        return that.$message.error('请输入操作倒计时')
      }
      if(!params.a_game_nooperationlimit && params.a_game_nooperationlimit!=0){
        return that.$message.error('请输入无操作上限时间')
      }
      // web设置
      if(!params.a_game_webname){
        return that.$message.error('请选择游戏Web名称')
      }
      if(!params.a_game_webicon){
        return that.$message.error('请选择游戏Web图标')
      }
      if(!params.a_game_webpic){
        return that.$message.error('请选择游戏Web背景图')
      }
      if(!params.a_game_webintro){
        return that.$message.error('请选择游戏Web简介')
      }
      if(!params.a_game_webjump){
        return that.$message.error('请输入Web页面跳转地址')
      }
      if(!params.a_game_webmark && params.a_game_webmark!=0){
        return that.$message.error('请选择Web游戏角标')
      }
      // app设置
      if(!params.a_game_appmark && params.a_game_appmark!=0){
        return that.$message.error('请选择App游戏角标')
      }
      params.a_game_appposition=that.columnDataBack()
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          // 新增
          if (!params.id) {
            addGame(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          } else {
            editGame(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 游戏类型展示
    gameLabel(cellValue){
      return (this.GAME_TYPE.find((item) => item.value === cellValue)?.label || "-");
    },
    // 新增栏位
    addColumn(){
      this.columnIndex++
      if(this.columnData[0].type==1){
        this.columnData.push({type:2,sort:0})
      }else{
        this.columnData.push({type:1,sort:0})
      }
    },
    // 删除栏位
    deleteColumn(index){
      this.columnIndex--
      this.columnData.splice(index,1,)
    },
    columnDataBack(){
      let arr=this.columnData,reward='';
      arr.map(item=>{
        reward+=item.type+','+item.sort+';'
      })
      reward = reward.substring(0, reward.length - 1)
      return  reward
    },
    // 上传图片-游戏图标
    imgUploadChangIcon (url) {
      this.formParams.a_game_webicon = url
    },
    // 上传图片-游戏背景
    imgUploadChangPic (url) {
      this.formParams.a_game_webpic = url
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.btn-box-add{
  width: 50px;
  text-align: center;
  margin-left: -15px;
  margin-right: -30px;
  .el-button{
    height: 28px;
  }
}
.btn-box-delete{
  width: 50px;
  text-align: center;
  margin-left: -25px;
  .el-button{
    height: 28px;
  }
}
</style>
